<template>
    <div class="box">
        <header>
            <span>x</span>
            首页
        </header>
        <nav>
            <span  
            v-for="(val,index) in list" 
            :key="val.title"
            :class="{active : curIndex === index}"
            @click="change(index)"
            >
                {{ val.title }}
            </span>
        </nav>
        <main>
            <div class="swiper-container" ref="container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">1</div>
                    <div class="swiper-slide">2</div>
                    <div class="swiper-slide">3</div>
                    <div class="swiper-slide">4</div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
           <div class="content" ref="content">
                <div class="con" v-for="val in list" :key="val.title" ref="con">
                    <h3>{{ val.title }}</h3>
                    <dl v-for="item in val.list" :key="item.id">
                        <dt>
                            <img :src="item.img" alt="">
                        </dt>
                        <dd>
                            <h4>{{ item.name }}</h4>
                            <p>{{ item.desc }}</p>
                            <div class="btns">
                                <span>{{ item.price }}</span>
                                <div v-if=" item.count != 0">
                                    <button class="sub">-</button>
                                    <span>{{ item.count }}</span>
                                </div>
                                <button class="add">+</button>
                            </div>
                        </dd>
                    </dl>
                </div>
           </div>
        </main>
        <footer>
            <p>
                <i class="el-icon-s-home"></i>
                <router-link to="/" tag="span">首页</router-link>
            </p>
            <p>
                <i class="el-icon-goods"></i>
                <span>购物车</span>
            </p>
            <p>
                <i class="el-icon-user"></i>
                <router-link to="/mine" tag="span">我的</router-link>
            </p>
        </footer>
    </div>
</template>

<script>
import Swiper, { Autoplay,Pagination} from 'swiper'
import 'swiper/swiper-bundle.css'
import { mapState, mapActions } from 'vuex'

Swiper.use([Autoplay,Pagination])

export default {
    data(){
        return {
            curIndex : 0,  // 当前下标
        }
    },
    computed : {
        ...mapState(['list']),
    },
    methods : {
        ...mapActions(['getlist']),
        change(index){
            this.curIndex = index;
            console.log(this.$refs.con[index].offsetTop);
            this.$refs.content.scrollTop = this.$refs.con[index].offsetTop;
            console.log(this.$refs.content.scrollTop);
        }
    },
    mounted(){
        //轮播图
        new Swiper(this.$refs.container,{
            loop : true,
            autoplay : {
                delay : 1000
            },
            pagination : {
                el : '.swiper-pagination'
            }
        })
        //调取列表数据
        this.getlist();
    }
}
</script>

<style lang="scss" scoped>
    .box{
        display: flex;
        flex-direction: column;
    }
    header{
        text-align: center;
        padding: 10px 20px;
        span{
            position: absolute;
            left: 50px;
        }
    }
    nav{
        height: 60px;
        line-height: 60px;
        display: flex;
        overflow: auto;
        span{
            display: inline-block;
            width: 80px;
            text-align: center;
            flex-shrink: 0;
            margin: 0 5px;
            &.active{
                color: red;
            }
        }
    }
    main{
        flex: 1;
        overflow: hidden;
    }
    .swiper-container{
        width: 100%;
        height: 200px;
        background: chartreuse;
    }
    .content{
        position: relative;
        height: 100%;
        overflow: auto;
    }
    .con{
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        h3{
            width: 100%;
            line-height: 40px;
            background: chocolate;
        }
        dl{
            width: 50%;
            padding: 10px 20px;
            img{
                width: 100%;
                height: 150px;
            }
        }
        h4{
            line-height: 30px;
            font-size: 18px;
        }
        p{
            margin: 10px 0;
        }
    }
    button{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: red;
        text-align: center;
        line-height: 30px;
        outline: none;
        border: none;
        color: #fff;
    }
    .btns{
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
    }
    footer{
        line-height: 60px;
        display: flex;
        text-align: center;
        p{
            flex: 1;
            display: flex;
            flex-direction: column;
            i{
                font-size: 28px;
            }
        }
    }

</style>